<!DOCTYPE html>
<html lang="zn-ch">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="./static/css/bootstrap.min.css" rel="stylesheet">
<script src="./static/js/jquery.min.js"></script>
<script src="./static/js//vue.min.js"></script>
<title>读点小游戏</title>
<link rel="stylesheet" href="./static/css/style.css">
<style>
.caption{
    text-align: center;
}
</style>
</head>
<body>
<div class="container" id="app">
    <div class="row">
        <div class="col-md-12 center">
            <h1>小游戏导航</h1>
        </div>
    </div>
    <div class="row">
            <div class="col-xs-6 col-md-2" v-for="v in list">
                <a :href="v.url" class="thumbnail" @click="jump(v,$event)">
                    <img src="./static/game.jpg" alt="游戏">
                </a>
                <div class="caption">
                    <h3>
                        {{v.title}}
                        <small v-if="v.status==1">开发中...</small>
                    </h3>
                </div>
            </div>
        </div>
    </div>
</div>    
</body>
</html>
<script>

new Vue({
    el:"#app",
    data:{
        list:[
            {
                title:"打字游戏",
                url:"./keygame.html",
                pc:true,
            },
            {
                title:"2048小游戏",
                url:"./2048.html",
            },
            {
                title:"俄罗斯方块",
                url:"./els.html"
            },
            {
                title:"扫雷",
                url:"./sl.html"
            },
            {
                title:"数字华容道",
                url:"./hrd.html"
            },
            {
                title:"贪吃蛇",
                url:"./snake.html"
            },
            {
                title:"翻版记忆",
                url:"./fanpai.html",
                mobile:true,
            },
            {
                title:"连连看",
                url:"./llk.html",
            },
            {
                title:"对对碰",
                url:"./ddp.html",
                status:1,
            },
            {
                title:"坦克大战",
                url:"./tank.html",
            },
            {
                title:"飞机大战",
                url:"./plant.html",
                status:1,
            },
            {
                title:"五子棋",
                url:"./five.html",
            },
            {
                title:"中国象棋",
                url:"./china_chess.html",
                status:1,
            },
            {
                title:"国际象棋",
                url:"./chess.html",
            },
            {
                title:"斗地主",
                url:"./poker.html",
                status:1,
            },
        ]
    },
    created(){

    },
    methods:{
        jump(v,e){
            if(v.mobile){
                if(fun.is_mobile()==false){
                    alert('只能在手机中打开');
                    e.preventDefault(); 
                }
            }else if(v.pc){
                if(fun.is_mobile()){
                    alert("不支持在手机中打开");
                    e.preventDefault(); 
                }
            }else if(v.status==1){
                alert("此游戏正在开发中，敬请期待!");
                e.preventDefault(); 
            }
        }
    }
})
</script>